<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>首页</title>
	<meta name="keywords" content="首页" />
	<meta name="description" content="首页" />
	<link rel="stylesheet" type="text/css" href="../css/normalize.css" />
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../js/API.js">
	<script src="../js/axios.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			var showproduct = {
				"boxid": "showbox",
				"sumid": "showsum",
				"boxw": 400,//宽度,该版本中请把宽高填写成一样
				"boxh": 400,//高度,该版本中请把宽高填写成一样
				"sumw": 60,//列表每个宽度,该版本中请把宽高填写成一样
				"sumh": 60,//列表每个高度,该版本中请把宽高填写成一样
				"sumi": 7,//列表间隔
				"sums": 5,//列表显示个数
				"sumsel": "sel",
				"sumborder": 1,//列表边框，没有边框填写0，边框在css中修改
				"lastid": "showlast",
				"nextid": "shownext"
			};//参数定义	  
			$.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行
		});
	</script>
</head>

<body>
	<div class="showall">
		<!--left -->
		<div class="showbot">
			<div id="showbox">
				<img id="showbox1" src="../img/JDlogo.gif"  width="400" height="400" />
				<img src="../img/JDlogo.gif" width="400" height="400" />
				<img src="../img/3e25659f3474c19e.png.webp" width="400" height="400" />
				<img src="../img/3e25659f3474c19e.png.webp" width="400" height="400" />
				<img src="../img/3e25659f3474c19e.png.webp" width="400" height="400" />
				<img src="../img/3e25659f3474c19e.png.webp" width="400" height="400" />

			</div>
			<!--展示图片盒子-->
			<div id="showsum">
				<!--展示图片里边-->
			</div>
			<p class="showpage">
				<a href="javascript:void(0);" id="showlast">
					< </a>
						<a href="javascript:void(0);" id="shownext"> > </a>
			</p>
		</div>
		<!--conet -->
		<div class="tb-property">
			<div class="tr-nobdr">
				<h3> 凌度行车记录仪尊享版</h3>
			</div>
			<div class="txt">
				<span class="nowprice">￥<a href="">599.00</a></span>-
				<div class="cumulative">
					<span class="number ty1">累计售出<br /><em id="add_sell_num_363">370</em></span>
					<span class="number tyu">累计评价<br /><em id="add_sell_num_363">25</em></span>
				</div>
			</div>
			<div class="txt-h">
				<span class="tex-o">分类</span>
				<ul class="glist" id="glist" data-monitor="goodsdetails_fenlei_click">
					<li><a title="红色36g" href="">红色36g</a></li>
					<li><a title="蓝色16g" href="">红色36g</a></li>
					<!--<li><a title="红色36g" href="">红色36g</a></li>
                        			<li><a title="蓝色16g" href="">红色36g</a></li>-->
				</ul>
			</div>
			<script>
				$(document).ready(function () {
					
					var t = $("#text_box");
					$('#min').attr('disabled', true);
				
					$("#add").click(function () {
						t.val(parseInt(t.val()) + 1)
						if (parseInt(t.val()) != 1) {
							$('#min').attr('disabled', false);
						}

					})
				
					$("#min").click(function () {
						t.val(parseInt(t.val()) - 1);
						if (parseInt(t.val()) == 1) {
							$('#min').attr('disabled', true);
						}

					})
				});
			</script>
			<div class="gcIpt">
				<span class="guT">数量</span>
				<input id="min" name="" type="button" value="-" />
				<input id="text_box" name="" type="text" value="1"
					style="width:30px; text-align: center; color: #0F0F0F;" />
				<input id="add" name="" type="button" value="+" />
				<span class="Hgt">库存（99）</span>
			</div>
			<div class="nobdr-btns">
				<button class="addcart hu"><img src="../img/shop.png" width="25" height="25" />加入购物车</button>
				<button class="addcart yh"><img src="../img/ht.png" width="25" height="25" />立即购买</button>
			</div>
			<div class="guarantee">
				<span>邮费：包邮&nbsp;&nbsp;支持货到付款 <a href=""><img src="../img/me.png" /></a></span>
			</div>
		</div>
		<!--right -->
		<div class="extInfo">
			<div class="brand-logo">
				<a href="" title="奥影汽车影音">
					<img src="../img/下载.png" />
				</a>
			</div>
			<div class="seller-pop-box">
				<span class="tr">商家名称：奥影汽车影音奥影汽车影音奥影汽车影音</span>
				<span class="tr">商家等级：初级店铺</span>
				<span class="tr">客家电话：15012365897</span>
				<span class="tr hoh">
					<a title="河南郑州市航海路57号河南郑州市航海路57号" href="">所在地区：河南郑州市航海路57号河南郑州市航海路57号</a>
				</span>
			</div>
			<div class="seller-phone">
				<span class="pop im">
					<a href="" data-name="联系卖家"><img src="../img/shop-line.png" />联系卖家</a>
				</span>
				<span class="pop in">
					<a href="" data-name="咨询卖家"><img src="../img/shop-line.png" />咨询卖家</a>
				</span>
				<span class="pop in">
					<a href="" data-name="进店逛逛"><img src="../img/shop-line.png" />进店逛逛</a>
				</span>
				<span class="pop in">
					<a href="" data-name="关注店铺"><img src="../img/shop-line.png" />关注店铺</a>
				</span>
			</div>
			<div class="jd-service">
				<a href="">
					<img src="../img/下载.png" />
				</a>
			</div>
			<div class="suport-icons">
				<h4>扫一扫<br />手机下单更优惠</h4>
				<img src="../img/下载.png" />
			</div>
		</div>
	</div>
	<!-- 推荐搭配 -->

	<!-- 商品介紹 -->

	<!--商品评价-->
	<script>
		$(function () {
			window.onload = function () {
				var $li = $('#tab li');
				var $ul = $('#content ul');

				$li.mouseover(function () {
					var $this = $(this);
					var $t = $this.index();
					$li.removeClass();
					$this.addClass('act_active');
					$ul.css('display', 'none');
					$ul.eq($t).css('display', 'block');
				})
			}
		});  

	/* 购物车接口 */
	let searachStr = location.search;
	console.log(searachStr);
        let searchParams = new URLSearchParams(searachStr)
        let pid = searchParams.get("id");
        let uid = localStorage.getItem("id")
        console.log(uid);
        if (!pid) {
            alert('商品不存在')

        } else {
            //商品存在 
			//***** 2-通过id获取商品详情
			let productDetailAPI="http://jx.xuzhixiang.top/ap/api/detail.php"
            axios.get(productDetailAPI, { params: { id: pid } })
                .then(res => {
                    console.log(res.data);
                    let pObj = res.data.data;
					console.log(pObj);
				
				   let box1 = document.querySelector('.tr-nobdr h3')
                    box1.innerHTML = pObj.pname
				   let box2 = document.querySelectorAll("#showbox img")
				   console.log(box2[0])
				  
				   box2[0].src = pObj.pimg
				  
					let box3 = document.querySelector(".txt a")
					console.log(box3)
					box3.innerHTML = pObj.pprice
                    // 3-给加减按钮 添加事件 控制  输入框的值 

					// 给加入购物车按钮添加事件-》 获取输入的值 发起加入购物车请求
					let addCartBtn=document.querySelectorAll("button")
					console.log(addCartBtn)
                     addCartBtn[0].onclick = async function () {
						let pnum = text_box.value;
						console.log(pnum)
                        // uid  用户id
                        // pid  商品id
                        // pnum  要添加的商品数量
					let	cartAddAPI="http://jx.xuzhixiang.top/ap/api/add-product.php"
                    let { data } = await axios.get(cartAddAPI, { params: { pnum, pid, uid } })
                        console.log(data);
                        alert('加入购物车成功') 

                    } 
 
                })



        }


	</script>

</body>

</html>